<template>
  <ul class="nav-box">
    <li>
      <img src="https://cdn1.iconfinder.com/data/icons/ecommerce-414/512/Store.png">
      <span>嗨购超市</span>
    </li>
   <li>
      <img src="https://cdn2.iconfinder.com/data/icons/e-commerce-617/512/Box_Package.png">
      <span>数码电器</span>
    </li>
    <li>
      <img src="https://cdn1.iconfinder.com/data/icons/ecommerce-414/512/Gift.png">
      <span>礼物</span>
    </li>
    <li>
      <img src="https://cdn3.iconfinder.com/data/icons/energy-and-power-18/512/Fire.png">
      <span>火爆</span>
    </li>
    <li>
      <img src="https://cdn3.iconfinder.com/data/icons/virtually-3d/512/4._AR_Shopping.png">
      <span>手机</span>
    </li>
    <li>
      <img src="https://cdn2.iconfinder.com/data/icons/business-1493/512/dollar_coin_coin_banking_cash_dollar_money_payment_shopping.png">
      <span>理财</span>
    </li>
    <li>
      <img src="https://cdn1.iconfinder.com/data/icons/sale3d/512/Price_cut.png">
      <span>降价促销</span>
    </li>
    <li>
      <img src="https://cdn4.iconfinder.com/data/icons/black-friday-209/512/Game_Controller_03.png">
      <span>PS5</span>
    </li>
    <li>
      <img src="https://cdn2.iconfinder.com/data/icons/startups-6/512/e-commerce_finance___wallet_payment_purchase_credit_pay_banking_bank_card.png">
      <span>充值</span>
    </li>
    <li>
      <img src="https://cdn3.iconfinder.com/data/icons/shopping-519/512/Bill.png">
      <span>账单</span>
    </li>
    <li>
      <img src="https://cdn2.iconfinder.com/data/icons/startups-6/512/e-commerce_finance___wallet_payment_purchase_credit_pay_banking_bank_card.png">
      <span>充值</span>
    </li>
    <li>
      <img src="https://cdn3.iconfinder.com/data/icons/shopping-519/512/Bill.png">
      <span>账单</span>
    </li>
  </ul>
</template>

<script>
export default {
  name:"NavBarVue",
  data(){
    return{

    }
  }

}
</script>

<style scoped>
.nav-box{
  width: 100%;
  height: 10rem;
  display: flex;
  background-color: white;
  flex-wrap: wrap;
  font-size: .75rem;
  margin-top: .3125rem;
  border-radius: .9375rem;
  overflow: auto;
}
.nav-box li{
  width: 20%;
  height: 5rem;
  box-sizing: border-box;
  /* border: 1px solid black; */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nav-box li img{
  padding-top: .625rem;
  width: 2.5rem;
  height: 2.5rem;
}
</style>